/* eslint-disable vue/valid-v-for */
<template>
  <div class="app-container">
    <!--搜索条件-->
    <div class="filter-container">
      <el-row :gutter="13" type="flex">
        <el-col :span="2">
          <el-select v-model="selectSortValue" placeholder="请选择" @change="selectSort">
            <!-- <el-option :key="0" :value="全部分类"/> -->
            <el-option
              v-for="item in sorts"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <el-col :span="2">
          <el-select v-model="selectStatusValue" placeholder="请选择" @change="selectStatus">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-col>

        <!-- @blur="searchSku" -->
        <el-col :span="4">
          <el-input v-model="search" placeholder="输入供应商.sku查询"/>
        </el-col>

        <el-col :span="1">
          <el-button type="primary" @click="searchSku">查询</el-button>
        </el-col>

        <el-col :span="1">
          <el-button v-show="checkPermission('pas:sku:add')" type="primary" @click="addFun()">新增</el-button>
        </el-col>

        <el-col :span="1">
          <el-upload
            v-loading="loading"
            :show-file-list="false"
            :http-request="excelUploadShipment"
            action="string"
            class="upload-demo"
            style="display: inline-block"
          >
            <el-button class="filter-item" type="primary" icon="el-icon-upload2">导入SKU</el-button>
          </el-upload>
        </el-col>
      </el-row>
    </div>

    <!-- v-loading="listLoading" -->
    <div class="table-ymm">
      <el-table :data="skuList" border highlight-current-row style="width: 95%;">
        <el-table-column
          :formatter="formatterClassification"
          prop="classification"
          label="分类"
          min-width="5%"
        />
        <el-table-column prop="categoryName" label="品类" min-width="5%"/>
        <el-table-column prop="brandName" label="品牌" min-width="8%"/>
        <el-table-column prop="skuCode" label="SKU编码" min-width="12%"/>
        <el-table-column prop="skuName" label="SKU名称" min-width="18%"/>
        <!-- <el-table-column :formatter="formatterStatus" prop="status" label="状态" min-width="5%"/> -->

        <el-table-column prop="status" label="状态" min-width="5%">
          <template slot-scope="scope">
            <span v-if="scope.row.status==1" style="color:#28A087">正常</span>
            <span v-else-if="scope.row.status==2" style="color:#F05050">停采</span>
            <span v-else>停用</span>
          </template>
        </el-table-column>

        <el-table-column
          :formatter="formatterSalesType"
          prop="salesType"
          label="发货方式"
          min-width="10%"
        />
        <el-table-column prop="internationalBarcode" label="国际编码" min-width="10%"/>
        <el-table-column prop="supplierName" label="供应商" min-width="15%"/>
        <el-table-column
          :formatter="formatterRmb"
          prop="purchasePrice"
          label="采购单价"
          min-width="10%"
        />
        <el-table-column prop="purchaseCompany" label="采购公司" min-width="10%"/>
        <el-table-column prop="specifications" label="规格" min-width="10%"/>
        <el-table-column align="center" label="操作" width="160">
          <template slot-scope="scope">
            <el-button v-show="checkPermission('pas:sku:edit')" type="primary" size="small" icon="el-icon-edit" @click="edictFun(scope)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!--分页-->
    <div class="pagination-container">
      <el-pagination
        v-show="total>0"
        :current-page="listQuery.page"
        :page-sizes="[10,20,30, 50]"
        :page-size="listQuery.pageSize"
        :total="total"
        background
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <component
      :is="modal"
      :modal-data="modalData"
      :modal-static-data="{supplierList,sorts,statusList,lianbaoBrandList,masterCategoryList,'title':modalData.title,closeChildAndRefresh}"
      @close="closeChild"
    />
  </div>
</template>

<script>
// post
import { get, post } from '@/api/utils'
import { distributorList } from '@/api/payment'
import Add from './dialog/Add.vue'
import { getUserInfo } from '@/api/login'
// import { parseTime } from '@/utils'

export default {
  data() {
    return {
      sorts: [
        { value: '1', label: '整机' },
        { value: '2', label: '工具' },
        { value: '3', label: '辅材' },
        { value: '4', label: '赠品' }
      ],

      statusList: [
        { value: '1', label: '正常' },
        { value: '2', label: '停采' },
        { value: '3', label: '停用' }
      ],
      selectSortValue: null,
      selectStatusValue: null,
      search: '',
      selectName: '请选择',
      partnerList: [
        {
          value: 'partner-73250',
          text: '美博'
        },
        {
          value: 'partner-73251',
          text: '长沙供应商'
        }
      ],
      dialogFormVisible: false,
      skuList: [],
      total: 1,
      listLoading: true,
      offset: 0,
      limit: 10,
      listQuery: {
        page: 1,
        pageSize: 10,
        keyword: null,
        starTime: null,
        endTime: null,
        shipmentNo: null,
        time: null,
        pageNumber: null
      },
      time: '',
      supplierList: [],
      lianbaoBrandList: [],
      masterCategoryList: [],
      modal: null,
      modalData: {}
    }
  },
  created() {
    this.getSkuList()
    this.getSupplierList()
    this.getLianbaoBrandList()
    this.getMasterCategoryList()
    this.getPermission()
    // this.getDistributorList()
  },

  methods: {
    // 导入
    excelUploadShipment(item) {
      this.loading = true
      var formData = new FormData()
      formData.append('importExcel', item.file)
      post('/wxh-cloud-rest/rest/', '/pas/sku/importSku', formData)
        .then(response => {
          if (response.data.status === 'success') {
            this.$message({
              message: '导入成功！',
              type: 'success'
            })
            this.loading = false
            setTimeout(() => {
              this.getSkuList()
            }, 1.5 * 1000)
          } else {
            this.$message(response.data.messge)
            this.loading = false
            setTimeout(() => {
              this.getSkuList()
            }, 10 * 1000)
          }
        })
        .catch(error => {
          console.log('===================' + error)
        })
    },
    formatterClassification(row, column) {
      if (row.classification) {
        if (row.classification === 1) {
          return '整机'
        } else if (row.classification === 2) {
          return '工具'
        } else if (row.classification === 3) {
          return '辅材'
        } else if (row.classification === 4) {
          return '赠品'
        }
      }
    },
    formatterStatus(row, column) {
      if (row.status) {
        if (row.status === 1) {
          return '正常'
        } else if (row.status === 2) {
          return '停采'
        } else if (row.status === 3) {
          return '停用'
        }
      }
    },
    formatterSalesType(row, column) {
      if (row.salesType) {
        if (row.salesType === 1) {
          return '供应商代发'
        } else if (row.salesType === 2) {
          return '仓库自发'
        }
      }
    },
    formatterRmb(row, column) {
      if (row.purchasePrice) {
        return '￥' + row.purchasePrice
      }
    },

    getSkuList() {
      // console.log('---------------'+arguments)
      this.listLoading = true

      this.listQuery.pageNumber =
        (this.listQuery.page - 1) * this.listQuery.pageSize

      var data = {
        offset: this.listQuery.pageNumber,
        limit: this.listQuery.pageSize
      }

      if (this.selectSortValue !== null) {
        data.classification = this.selectSortValue
      }

      if (this.selectStatusValue !== null) {
        data.status = this.selectStatusValue
      }

      if (this.search !== null) {
        data.search = this.search
      }

      get('/wxh-cloud-rest/rest/', '/pas/sku/list', data)
        .then(response => {
          if (response.data.status === 'success') {
            // console.log('-------------------------------------------------------------')
            this.total = response.data.data.count
            this.skuList = response.data.data.skuList

            // console.log(this.skuList)
            this.listLoading = false
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
            this.listLoading = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '数据加载失败',
            type: 'warning'
          })
          this.listLoading = false
        })
    },

    selectSort(event) {
      this.selectSortValue = event
      this.listQuery.page = 1
      this.getSkuList()
    },
    selectStatus(event) {
      this.selectStatusValue = event
      this.listQuery.page = 1
      this.getSkuList()
    },

    searchSku(event) {
      // console.log(event)
      this.listQuery.page = 1
      this.getSkuList()
      // this.getSkuList()
    },

    // 查询分销商
    getDistributorList() {
      distributorList().then(response => {
        this.disList = response.data.data
      })
    },
    handleSizeChange(val) {
      this.listQuery.pageSize = val
      this.getSkuList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getSkuList()
    },

    addFun() {
      // console.log("新增")
      // const sorts = this.sorts;
      // this.modalData = { type: 'creat', 'title':'新增sku',sorts,'statusList':this.statusList }
      // this.modalData = {type: 'creat', 'title':'新增sku',...this.modalData}
      this.modalData = { type: 'creat', title: '新增sku' }
      this.modal = Add
    },
    edictFun(data) {
      var sku = data.row
      this.modalData = { type: 'edict', title: '修改sku', sku }
      this.modal = Add
    },
    closeChild() {
      this.modal = null
    },
    closeChildAndRefresh() {
      this.modal = null
      this.listQuery.page = 1
      this.getSkuList()
    },

    getSupplierList() {
      get('/wxh-cloud-rest/rest/', '/pas/supplier/list', null)
        .then(response => {
          if (response.data.status === 'success') {
            this.supplierList = response.data.data.supplierList
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '供应商数据加载失败',
            type: 'warning'
          })
        })
    },

    getLianbaoBrandList() {
      get('/wxh-cloud-rest/rest/', '/pas/sku/lianbaoBrandlist', null)
        .then(response => {
          if (response.data.status === 'success') {
            this.lianbaoBrandList = response.data.data.lianbaoBrandList
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '供应商数据加载失败',
            type: 'warning'
          })
        })
    },

    getPermission() {
      var arr = document.cookie.split('; ') // 这里显示的格式需要切割一下自己可输出看下

      for (var i = 0; i < arr.length; i++) {
        var arr2 = arr[i].split('=') // 再次切割
        // 判断查找相对应的值
        if (arr2[0] === 'sidebarStatus') {
          this.userid = arr2[1]
        }
      }

      if (localStorage.getItem(this.userid)) {
        return
      }

      getUserInfo().then(response => {
        if (response.data.status === 'ok') {
          localStorage.setItem(
            this.userid,
            JSON.stringify(response.data.data.permissions)
          )
        }
      })
    },

    checkPermission(value) {
      if (value) {
        if (localStorage.getItem(this.userid) && localStorage.getItem(this.userid).indexOf(value) >= 0) {
          return true
        } else {
          return false
        }
      } else {
        return false
      }
    },

    getMasterCategoryList() {
      get('/wxh-cloud-rest/rest/', '/pas/sku/masterCategorylist', null)
        .then(response => {
          if (response.data.status === 'success') {
            this.masterCategoryList = response.data.data.masterCategoryList
          } else if (response.data.status === 'token_check_faild') {
            this.$message({
              message: response.data.messge,
              type: 'warning'
            })
          }
        })
        .catch(error => {
          console.log(error)
          this.$message({
            message: '供应商数据加载失败',
            type: 'warning'
          })
        })
    }
  }
}
</script>
